<template>
  <view class="root">
    <u-radio-group @change="handleRadioChange" v-model="currentHousingManager">
      <view class="content-wrapper">
        <view class="list-item" v-for="(item, index) in housingManagerList" :key="index">
          <navigator :url="'/selfInfo/myHouse/housingManagerDetail?info=' + encodeURIComponent(JSON.stringify(item))">
            <view class="v-item">
              <view class="v-label">人员类型:</view>
              <view class="v-value">{{item.trusteeship =='1' ? '托管人' : '房主本人'}}</view>
            </view>
            <view class="v-item">
              <view class="v-label">人员姓名:</view>
              <view class="v-value">{{item.userName}}</view>
            </view>
            <view class="v-item">
              <view class="v-label">联系方式:</view>
              <view class="v-value">{{item.phone}}</view>
            </view>
          </navigator>
          <u-line color="#F0F0F0" margin="0 0 23rpx 0"></u-line>
          <view class="radio-wrapper">
            <view class="l-left">
              <u-radio :name="item.id"></u-radio>
              <view class="text">
                设为当前负责人
              </view>
            </view>
            <view class="delete" v-if="(currentHousingManager !== item.id) && housingManagerList.length > 1"
              @click="handleDelete(item)">删除
            </view>
          </view>
        </view>
      </view>
    </u-radio-group>
    <view class="button-wrapper">
      <navigator
        :url="`/selfInfo/myHouse/addHousingManager?houseid=${options.fHouseid}&buildingId=${options.buildingId}`">
        <view class="btn">新增负责人</view>
      </navigator>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    deletePoliceHouseMain,
    selectPoliceHouseMain,
    setisMainId
  } from '../../api/api';
  import {
    isLoading,
    popup,
    Toast
  } from '../../utils/util';
  export default {
    data() {
      return {
        housingManagerList: [],
        options: {},
        currentHousingManager: ''
      };
    },
    onLoad(options) {
      this.options = options
    },
    onShow() {
      this.initPage()
    },
    methods: {
      initPage() {
        let params = {
          fHouseid: this.options.fHouseid,
        };
        isLoading();
        selectPoliceHouseMain(params)
          .then((res) => {
            this.housingManagerList = res.result;
            let isMain = this.housingManagerList.find((item) => item.isMain === 1)
            if (isMain) {
              this.currentHousingManager = isMain.id
            }
          })
          .finally(() => {
            isLoading(false);
          });
      },
      handleRadioChange(value) {
        isLoading()
        let params = {
          houseid: this.options.fHouseid,
          id: value
        }
        setisMainId(params)
          .then((res) => {
            Toast('操作成功', 'success')
            setTimeout(() => {
              uni.reLaunch({
                url: '/selfInfo/myHouse/myHouse'
              })
            }, 500)
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleDelete(item) {
        let params = {
          id: item.id
        }
        popup(() => {
          isLoading()
          deletePoliceHouseMain(params)
            .then((res) => {
              Toast('删除成功', 'success')
              this.initPage()
            })
            .finally(() => {
              isLoading(false)
            })
        }, '请确认是否删除当前负责人？')
      }
    },
  };
</script>

<style lang="scss">
  page {
    background: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
  .root {
    .content-wrapper {
      padding: 20rpx;
      width: 100%;
      margin-bottom: 130rpx;

      .list-item {
        margin-bottom: 10rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 35rpx;

        .v-item {
          display: flex;
          margin-bottom: 24rpx;

          .v-label {
            font-weight: 500;
            font-size: 28rpx;
            color: #AAAAAA;
            margin-right: 10rpx;
          }

          .v-value {
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;
          }
        }

        .radio-wrapper {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .l-left {
            display: flex;
            align-items: center;

          }

          .delete {
            font-size: 26rpx;
            color: #AAAAAA;
          }

          .text {
            margin-left: 15rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #AAAAAA;
          }
        }
      }
    }

    .button-wrapper {
      height: 120rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      align-items: center;
      justify-content: center;
      width: 100%;

      .btn {
        width: 680rpx;
        height: 80rpx;
        background: #EDF7FF;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        border: 1rpx solid #ACCBEC;
        font-weight: 500;
        font-size: 30rpx;
        color: #2488F5;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>